<template>
	<div class="zco-collect-variable-response-container">
		<p>{{ getCollectVariableStatus }}</p>
		<template v-if="status === 'done'">
			<div v-for="(item, index) in variableList" :key="index" class="variable-box">
				<p>{{ item.name }}：{{ item.value }}</p>
			</div>
		</template>
		<template v-else>
			<p>原因：访客拒绝</p>
		</template>
	</div>
</template>
<script>
export default {
	name: 'APP',
	props: {
		toUserRole: {
			type: String,
			default: () => ''
		},
		toUserName: {
			type: String,
			default: () => ''
		},
		variableList: {
			type: Array,
			default: () => []
		},
		status: {
			type: String,
			default: () => ''
		}
	},
	computed: {
		getCollectVariableStatus() {
			return `致 <${this.toUserRole === 'agent' ? '坐席' : '访客'}${this.toUserName}>，${this.status === 'done' ? '提交成功' : '提交失败'}`;
		}
	},
	data() {
		return {};
	},
	methods: {},
	created() {},
	mounted() {}
};
</script>
<style scoped>
.zco-collect-variable-response-container p {
	margin: 0;
}
.variable-box p {
	margin: 0;
}
</style>
